{$header}

{literal}
<style type="text/css">
body{ background:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/wp-content/uploads/2011/05/handmade-paper-preview.jpg)}
#container{	
    clear: both;
	margin:0 auto;
}
.highlight{ background-color:#fffea2;font: 12px/1.5 sans-serif;}

.item{ width:300px; float:left; 
	margin:5px; padding:10px; position:relative;
	border-bottom:2px solid #c9c7c8;
	border-left:1px solid #c9c7c8;
	border-right:1px solid #c9c7c8;
	border-top:1px solid #dedcdd;
	background-color:#fff;
}
.close{border:1px solid red; border-right:8px solid red; border-left:0px none; background:#fff; position:absolute;top:10px ; left:0px; padding:10px; color:red; z-index:200; font-weight:bold}

.cImg {
  display: none;
}

.item .mImg{width:300px; height:160px;}
.item .meta{display:none;}
.item .name{ margin:5px 0px;}
.item .name a{font:12px/1.5 sans-serif;}

.item .saleprice{position:absolute;top:134px; right:0px;
	  background:#fff; color:red; padding:5px;
	  font:16px 'Jura', sans-serif;
	  
	  border: 3px solid rgb(128, 128, 128);
	  border: 3px solid rgba(128, 128, 128, .5);
	  -webkit-background-clip: padding-box; /* for Safari */
	  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
	  border-right:0px none;
	  
	  border-top-left-radius:10px;
	  border-bottom-left-radius:20px;	  
	  -moz-border-top-left-radius:10px;
	  -moz-border-bottom-left-radius:10px;	  
	  -webkit-border-top-left-radius:10px;
	  -webkit-border-bottom-left-radius:10px;
	  
	  
}
.item .saleprice .price{
	 text-decoration: line-through;
	 font:11px 'Jura', sans-serif;
	 color:#8C7E7E;
}


.item .saleprice b{font-size:9px; margin-right:3px;color:#8C7E7E; font-weight:bold}


.item .description{font:12px/1.5 sans-serif; pading:5px; color:#CCC}

.item .salecnt{
	font:11px "helvetica neue",arial,sans-serif;
	color:#8C7E7E;
}
.item .domain{text-align:right;}
.item .domain a{text-align:right; color:#8C7E7E; 
		font-size:10px;
		font-family: "helvetica neue",arial,sans-serif;
}
</style>
{/literal}
<div id="hd">
    <div id="hd_inner_box">
    
        <h1><a href="{$G_URL}">Coupongru</a></h1>
        <ul>
        	<li>지역</li>
            <li>카테고리</li>
            <li>종류</li>
        </ul>
        
        
        <div id="area" style="display:none">
            <ul>
                <li id='A0'>전국</li>
                <li id='A1'>강원</li>
                <li id='A2'>경기</li>
                <li id='A3'>경남</li>
                <li id='A4'>경북</li>
                <li id='A5'>광주</li>
                <li id='A6'>대구</li>
                <li id='A7'>대전</li>
                <li id='A8'>부산</li>
                <li id='A9'>서울</li>
                <li id='A10'>울산</li>
                <li id='A11'>인천</li>
                <li id='A12'>전남</li>
                <li id='A13'>전북</li>
                <li id='A14'>제주</li>
                <li id='A15'>충남</li>
                <li id='A16'>충북</li>
            </ul>
        </div>
   
    </div><!--#hd_inner_box-->
    
        
    <div id="ment">
        <p><span class="icon"></span></p>
    </div>
</div><!--#hd-->


<div id="bd" style="margin:10px auto; width:100%">

    <div id="search_wrap" style="margin:0 auto">

        <input type="text" name="search" id="search" class="search rd5" value="{$name}" />
        <div id="shorter" class="rd5"><a href="#none" id="btnSearch">SEARCH</a></div>
        <div id="loading"></div>
        <div class="cb"></div>
    </div><!--#search_wrap-->
    
	<div id="container">
    {section name=r loop=$arrList}
    
    <div class="item">
    {if $arrList[r].tt < 0}<div class="close">SOLD OUT</div>{/if}    
        	<div class="meta">{$arrList[r].id}</div>
            <div class="meta">{$arrList[r].cc} | {$arrList[r].aa}</div>
            <div class="mImg"><img class="cImg" src="http://img.snsapi.org/s/{$arrList[r].mImgS}" /></div>
        	<div class="name">            	
                <a target="_blank" href="{$arrList[r].url}">{$arrList[r].name}</a>                
            </div>
            <div class="salecnt">{$arrList[r].salecnt}명 구매</div>
            
            {if {$arrList[r].name}!={$arrList[r].description}}
            	{if {$arrList[r].description}!=""}
                <div class="description">{$arrList[r].description}</div>
                {/if}
            {/if}
            <div class="category meta">{$arrList[r].category}</div>
            
            
            <div class="saleprice">
            	<span class="price">{$arrList[r].price}</span>
                <b>({$arrList[r].salerate}%)</b>
                {$arrList[r].saleprice}
            </div>
            {assign var=domain value="."|explode:$arrList[r].domain} 
            <div class="domain"><a href="http://{$arrList[r].domain}" target="_blank">{$domain[0]}</a></div>
            
            <!--
            <div class="enddate">{$arrList[r].enddate}</div>
            <div class="categoryCode">{$arrList[r].categoryCode}</div>
            <div class="description">{$arrList[r].description}</div>
            -->
   
    </div>
    {/section}
    </div>

    <div class="cb"></div>
    
</div><!--#bd-->

{literal}
<script type="text/javascript" src="inc/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="inc/js/common.js"></script>
<script type="text/javascript" src="inc/js/jquery.lazyload.js"></script>
<script type="text/javascript" src="inc/js/layout.js"></script>
<script type="text/javascript">
var find = {
	init:function(){	  
		$('#search').keydown(function(e){
			if(e.keyCode==13)find._search($(this).val());
		}).click(function(){
			$(this).val('');
		});
		$('#btnSearch').click(function(){
			find._search($('#search').val());
		});
		
		$('#ment').hide();	 
		
		
		$("img.cImg").show().lazyload({
			effect : "fadeIn",
			failure_limit : 10,
			skip_invisible : false
		});
	},_search:function(v){
		window.location.href = 'find?name='+v;
	}
}
$(function(){	
	find.init();
	$('#container').masonry({
	  // options
	  itemSelector : '.item',
	  isAnimated: true,
	  isFitWidth: true 

	});
	$('.item').hover(
		function(){
			$(this).find('img').animate({ opacity: 0.5 },1500);
		},
		function(){
			$(this).find('img').animate({ opacity: 1 },1500);
		}
	);
	
});//ready
</script>
{/literal}

{$footer}